<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-1">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                               <span>{{hospitalQuantity}}</span>
                            </div>
                            <div style="font-size: 15px">医院</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                                <span>{{doctorQuantity}}</span>
                            </div>
                            <div style="font-size: 15px">医生</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                                <span>{{wanfangQuantity}}</span>
                            </div>
                            <div style="font-size: 15px">万方</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                                <span>{{PubmedQuantity}}</span>
                            </div>
                            <div style="font-size: 15px">Pubmed</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                                <span>{{informationQuantity}}</span>
                            </div>
                            <div style="font-size: 15px">资讯</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <div class="grid-cont-right">
                            <div class="grid-num">
                                <span>{{ConferenceOn}}</span>
                            </div>
                            <div style="font-size: 15px">会务通</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover" class="uHeight">
                    <div class="user-info">
                        <img src="static/img/img.jpg" class="user-avator" alt="">
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
                    <div class="user-info-list">上次登录地点：<span>北京</span></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="uHeight">
                    <div slot="header" class="clearfix">
                        <span>语言详情</span>
                    </div>
                    Vue
                    <el-progress :percentage="57.2" color="#42b983"></el-progress>
                    JavaScript
                    <el-progress :percentage="29.8" color="#f1e05a"></el-progress>
                    CSS
                    <el-progress :percentage="11.9"></el-progress>
                    HTML
                    <el-progress :percentage="1.1" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                wanfangUrl: 'http://bigdata-api.huimeimt.cn/resource_server/wanfangmdm/wanfang_count',
                hospitalUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcomdm/hco_count',
                doctorUrl: 'http://bigdata-api.huimeimt.cn/resource_server/hcpmdm/hcp_count',
                PubmedUrl: 'http://bigdata-api.huimeimt.cn/resource_server/pubmedmdm/pubmed_count',
                informationUrl: 'http://bigdata-api.huimeimt.cn/resource_server/newsmdm/news_count',
                ConferenceOnUrl: 'http://bigdata-api.huimeimt.cn/resource_server/meetingsmdm/meeting_count',
                hospitalQuantity: 0,
                doctorQuantity: 0,
                wanfangQuantity: 0,
                PubmedQuantity: 0,
                informationQuantity: 0,
                ConferenceOn: 0,
                access_token: '',
                name: localStorage.getItem('ms_username'),
                todoList: [
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: true,
                    },
                    {
                        title: '今天要写100行代码加几个bug吧',
                        status: true,
                    },
                    {
                        title: '今天要写100行代码加几个bug吧',
                        status: true,
                    }
                    ,
                    {
                        title: '今天要写100行代码加几个bug吧',
                        status: true,
                    }
                ]
            }
        },
        computed: {
            role() {
                return this.name === 'huimeiadmin' ? '超级管理员' : '普通用户';
            },
        },
        created() {
            this.gainTtoken();
        },
        methods: {
            gainTtoken() {
                this.$axios.get('http://bigdata-oauth.huimeimt.cn/Dataplatform/token').then((res) => {
                    this.access_token = res.data.access_token;
                    this.dataDisplay()
                });
            },
            dataDisplay() {
                var a = this;
                this.$axios.get(this.hospitalUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {hospitalQuantity: response.data.result});
                });
                this.$axios.get(this.doctorUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {doctorQuantity: response.data.result});
                });
                this.$axios.get(this.wanfangUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {wanfangQuantity: response.data.result});
                });
                this.$axios.get(this.PubmedUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {PubmedQuantity: response.data.result});
                });
                this.$axios.get(this.informationUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {informationQuantity: response.data.result});
                })
                this.$axios.get(this.ConferenceOnUrl + "?access_token=" + this.access_token).then(function (response) {
                    TweenLite.to(a.$data, 0.5, {ConferenceOn: response.data.result});
                })
            },
        },
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #999;
    }

    .grid-num {
        font-size: 25px;
        font-weight: bold;
    }
    .grid-num span{
        display: inline-block;
        width: 160px;
        height: 30px;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .uHeight {
        height: 260px;
    }
</style>
